<template>
	<div class="serve-box">
		<img class="serve-banner" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-14/63eb3b11fb5183fe78bbe5ee.png" />
		<div class="serve-conter">
			<div class="serve-conter_ul">
				<div class="serve-conter_lable">6 大系统服务</div>
				<div class="serve-conter_li" v-for="(item,index) in headList" :key="index" @click="scrollTab(index)">{{ item }}</div>
			</div>
			<div class="sconter-plan">
				<div class="sconter-plan_reli" v-for="(item,index) in viewModel" :key="index">
					<div class="plan_reli-klf" :style="{backgroundColor: item.bgColor}">
						<div class="plan_reli-kt1">{{ item.name }}</div>
						<div class="plan_reli-kt2" v-html="item.intro"></div>
					</div>
					<div class="plan_reli-mrg">
						<div class="reli-mrg_vt1">{{ item.subhead }}</div>
						<div class="reli-mrg_chal">
							<div class="reli-mrg_mkp1">
								<div class="reli-mrg_xt1">{{ item.gridList1.name }}</div>
								<div class="reli-mrg_xbo">
									<div class="reli-mrg_zt" v-for="(zItem,zIndex) in item.gridList1.childers" :key="zIndex">{{ zItem }}</div>
								</div>
							</div>
							<div class="reli-mrg_mkp2">
								<div class="reli-mrg_xt1">{{ item.gridList2.name }}</div>
								<div class="mrg_mkp2-cot">
									<div class="mrg_mkp2-cli" v-for="(vItem,vIndex) in item.gridList2.chlderList" :key="vIndex">
										<div class="mrg_mkp2-cst1">{{ vItem.name }}</div>
										<div class="mrg_mkp2-cst2">
											<div class="mrg_mkp2-cst3" v-for="(kItem,kIndex) in vItem.chdlers" :key="kIndex">{{ kItem }}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="serve-conter_ul">
				<div class="serve-conter_lable">业务类型</div>
				<div class="serve-conter_li" v-for="(item,index) in businessList" :key="index">
					<div class="serve-conter_dt1">{{ item.name }}</div>
					<div class="serve-conter_dt2">{{ item.intro1 }}</div>
					<div class="serve-conter_dt2">{{ item.intro2 }}</div>
				</div>
			</div>
			<div class="serve-conter_principle">
				<img class="conter_principle-ig" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-10/63e60fc2441ef48fa6017f48.jpg" />
				<div class="conter_principle-mce">
					<div class="principle-mce_mh1">服务原则</div>
					<div class="principle-mce_mh2">不是单一方案作业，而是共同探讨达成，推动项目实战落地；不是服务企业局部，而是服务企业整体，实现系统品牌创新；<br />
						不是专案项目组制，而是领英整体赋能，成就企业非凡伟业；不是短期项目执行，而是长期项目陪跑，价值与利润最大化；<br />
						不是传统甲乙关系，而是事业共创伙伴，携手奋进共赢未来。</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import test from './test.json'
	export default {
		data() {
			return {
				viewModel: test,
				headList: ['战略规划', '形象创意', '商业模式', '市场营销', '数字转型', '资本运营'],
				businessList: [{
					name: '大型全案咨询服务',
					intro1: '战略与营销品牌顾问年度整体服务',
					intro2: '品牌/营销年度整体服务（12个月以上）'
				}, {
					name: '中型全案咨询服务',
					intro1: '战略&营销品牌顾问全案（3个月以上）',
					intro2: '品牌全案（季度）：营销全案（季度）'
				}, {
					name: '小型全案服务',
					intro1: '品牌&营销专案（2个月以上）',
					intro2: '营销专案（2个月以上）'
				}]
			}
		},
		computed: {
			key() {
				return this.$route.path + Math.random()
			}
		},
		methods: {
			async scrollTab(sIndex) {
				var scrollTop = document.getElementsByClassName('sconter-plan_reli')
				document.body.scrollTop = document.documentElement.scrollTop = scrollTop[sIndex].offsetTop - parseInt((document.documentElement.clientWidth / 100) * 6.8)
			}
		}
	}
</script>
<style lang="scss">
	@import './style.scss';
</style>